<template>
  <div>
    <!-- table start -->
    <table-data-el :tableData="tableData"
                   :tableLabel="tableLabel"
                   style="margin-top:20px;"
                   height="87vh"
                   v-loading="loading"
                   @handlePopularize="handlePopularize" />
    <!-- table end -->

    <!-- dialog start -->
    <el-dialog :visible.sync="isShowDialog"
               title="修改推广设置"
               width="25%"
               center
               @close="$refs['form'].resetFields(),Object.keys(form).map((key) => form[key] = '')">
      <template>
        <el-form :model="form"
                 label-width="100"
                 :inline="true"
                 ref="form">
          <el-form-item label="直推奖励"
                        prop="straight_reward"
                        :rules="[
                                { required: true, message: '请填写直推奖励', trigger: 'blur'}
                            ]">
            <el-input v-model="form.straight_reward"
                      placeholder="请输入直推奖励"
                      style="width:100%;"></el-input>
          </el-form-item>
          <el-form-item label="间推奖励"
                        prop="between_reward"
                        :rules="[
                                { required: true, message: '请填写间推奖励', trigger: 'blur'}
                            ]">
            <el-input v-model="form.between_reward"
                      placeholder="请输入间推奖励"
                      style="width:100%;"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template slot="footer">
        <el-button type="primary"
                   @click="handleMdfPopularize('form')">确定</el-button>
        <el-button type="danger"
                   @click="isShowDialog = false">取消</el-button>
      </template>
    </el-dialog>
    <!-- dialog end -->
  </div>
</template>

<script>
import tableDataEl from '@/views/Setup/common/table'
export default {
  name: "popularizeList",
  data () {
    return {
      tableData: [],
      tableLabel: [
        {
          label: '直推奖励',
          prop: 'straight_reward'
        },
        {
          label: '间推奖励',
          prop: 'between_reward'
        },
        {
          label: '设置人',
          prop: 'person'
        },
        {
          label: '设置时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          detail: true,
          btnText: '修改',
          methodName: 'handlePopularize'
        }
      ],
      isShowDialog: false,
      form: {
        straight_reward: '',
        between_reward: ''
      },
      loading: false
    }
  },
  components: {
    tableDataEl
  },
  methods: {
    async init () {
      this.loading = true;
      let res = await this.api.popularizeList({})
      this.tableData = res.data;
      this.loading = false
    },
    handlePopularize (...value) {
      Object.assign(this.form, value[1]);
      this.isShowDialog = true;
    },
    async handleMdfPopularize (formName) {
      let flag = true;
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          flag = false
        }
      });
      if (!flag) return false;
      delete this.form['create_time'];
      delete this.form['person'];
      let res = await this.api.mdyPopularize(this.form).then(res => res);
      this.init();
      this.$message({
        message: res.msg,
        type: res.code === 1 ? 'success' : 'error'
      });
      this.isShowDialog = false;
    }
  },
  mounted () {
    this.init();
  }
}
</script>

<style scoped>
</style>
